<template>
    <div class="operate">
        <!-- 数据搜索输入框 -->
        <el-input v-model="searchTitle" placeholder="请输入数据" clearable @clear="fetchData" />
        <!-- 导出按钮 -->
        <el-button @click="educeData">导出</el-button>
        <!-- 导入按钮 -->
        <el-button @click="importData">导入</el-button>
        <!-- 添加数据按钮 -->
        <el-button @click="addData">添加数据</el-button>
    </div>

    <!-- 数据表格，双击行可查看详情 -->
    <el-table :data="filteredTableData" row-key="id" style="width: 100%; margin-top: 1%;"
        @row-dblclick="handleRowDblClick">
        <el-table-column prop="data1" label="数据1" show-overflow-tooltip />
        <el-table-column prop="data2" label="数据2" show-overflow-tooltip />
        <el-table-column prop="data3" label="数据3" show-overflow-tooltip />
        <el-table-column prop="data4" label="数据4" show-overflow-tooltip />
        <el-table-column prop="data5" label="数据5" show-overflow-tooltip />
        <template #empty>暂无数据</template>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" layout="prev, pager, next"
        @current-change="handlePageChange" />

    <!-- 数据上传弹窗 -->
    <el-dialog v-model="isShowImport" title="导入数据" width="500px" align-center>
        <!-- 文件上传组件，支持拖拽和点击上传 -->
        <el-upload class="upload-demo" drag action="请输入你的后端接口" multiple :before-upload="beforeUpload"
            :on-success="handleUploadSuccess" :on-error="handleUploadError" :on-exceed="handleUploadExceed" :limit="1"
            accept=".xlsx,.xls">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                请拖拽上传 或 <em>点击上传</em> 文件
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    注：只能上传 Excel 文件，且不超过 5MB
                </div>
            </template>
        </el-upload>
        <template #footer>
            <div class="dialog-footer">
                <!-- 下载导入模板按钮 -->
                <el-button @click="getExcel">获取模板</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
// 引入 vue 相关方法
import { ref, computed } from 'vue'
// 引入 element-plus 组件
import { ElInput, ElButton, ElTable, ElTableColumn, ElPagination, ElDialog, ElUpload, ElIcon, ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
// 引入 vue-router
import { useRouter } from 'vue-router'
// 引入 xlsx 用于导出 Excel
import * as XLSX from 'xlsx' // 导入数据导出库

// 获取路由实例
const router = useRouter()

// 控制导入弹窗显示
let isShowImport = ref(false)

// 搜索框绑定的变量
const searchTitle = ref('')
// 当前页码
const currentPage = ref(1)
// 每页显示的数据量
const pageSize = ref(10)
// 数据总数
const total = ref(0)

// 原始数据数组
const tableData = ref([
    {
        id: 1,
        data1: '数据1',
        data2: '数据2',
        data3: '数据3',
        data4: '数据4',
        data5: '数据5',
    },
    {
        id: 2,
        data1: '数据',
        data2: '数据',
        data3: '数据',
        data4: '数据',
        data5: '数据',
    },
    {
        id: 3,
        data1: '数据',
        data2: '数据',
        data3: '数据',
        data4: '数据',
        data5: '数据',
    }
])

// 计算属性，返回过滤后的数据
const filteredTableData = computed(() => {
    // 根据搜索框的内容过滤数据
    let filtered = tableData.value.filter(item => {
        return (
            (!searchTitle.value || item.data1.includes(searchTitle.value) || item.data2.includes(searchTitle.value)) || item.data3.includes(searchTitle.value) || item.data4.includes(searchTitle.value) || item.data5.includes(searchTitle.value)
        )
    })
    // 更新数据总数
    total.value = filtered.length
    // 返回当前页的数据
    return filtered.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})

// 清空搜索框时重置页码
const fetchData = () => {
    currentPage.value = 1
}

// 分页组件页码改变时的处理函数
const handlePageChange = newPage => {
    currentPage.value = newPage
}

// 导出数据为Excel文件
const educeData = () => {
    // 将过滤后的数据转换为工作表
    const worksheet = XLSX.utils.json_to_sheet(filteredTableData.value)
    // 创建一个新的工作簿
    const workbook = XLSX.utils.book_new()
    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
    // 保存工作簿为文件
    XLSX.writeFile(workbook, '数据列表.xlsx')
}

// 数据导入功能，显示导入弹窗
const importData = () => {
    isShowImport.value = true
}

// 双击行时跳转到数据详情页
const handleRowDblClick = row => {
    router.push(`/dashboard/data/detail/${row.id}`)
}

// 添加数据功能（可根据实际需求补充实现）
const addData = () => {
    // 添加数据的请求
}

// 文件上传前的校验
const beforeUpload = file => {
    const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    const isLt5MB = file.size / 1024 / 1024 < 5
    if (!isExcel) {
        ElMessage.error('只能上传 Excel 文件')
        return false
    }
    if (!isLt5MB) {
        ElMessage.error('文件大小不能超过 5MB')
        return false
    }
    return true
}

// 文件上传成功的回调
const handleUploadSuccess = () => {
    ElMessage.success('文件上传成功')
    isShowImport.value = false
}

// 文件上传失败的回调
const handleUploadError = () => {
    ElMessage.error('文件上传失败')
    isShowImport.value = false
}

// 文件上传超出限制的回调
const handleUploadExceed = () => {
    ElMessage.warning('只能上传一个文件')
    isShowImport.value = false
}

// 获取数据导入模板
const getExcel = () => {
    // 创建一个工作簿
    const workbook = XLSX.utils.book_new()
    // 创建一个工作表，表头与数据结构一致
    const worksheet = XLSX.utils.json_to_sheet([
        { data1: '', data2: '', data3: '', data4: '', data5: '' }
    ])
    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
    // 保存工作簿为文件
    XLSX.writeFile(workbook, '导入模板.xlsx')
}
</script>

<style scoped>
/* 操作栏样式 */
.operate {
    display: flex;
    align-items: center;
}

.operate>div,
.operate>button {
    margin-left: 1%;
}

.operate>.el-input {
    width: 20%;
}

.operate>.el-select {
    width: 15%;
}
</style>